---
title: 액티비티 탐색하기
---

import { Callout } from "nextra-theme-docs";
import { APITable } from "../../../components/APITable";

# 액티비티 탐색하기

성공적으로 액티비티를 등록했다면, 이제 액티비티 사이를 이동해볼 차례에요. **Stackflow**에서는 `useFlow()`를 통해 액티비티를 쌓거나, 교체하거나, 삭제할 수 있도록 지원하고 있어요. 한번 알아볼까요?

## 새 액티비티 쌓기

`stackflow.ts`에서 생성했던 `useFlow()` 훅을 사용해요. 해당 훅 내에 `push()` 함수를 통해 다음과 같이 새 액티비티를 쌓을 수 있어요.

```tsx filename="MyActivity.tsx" copy
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

const MyActivity: ActivityComponentType = () => {
  const { push } = useFlow();

  const onClick = () => {
    push("Article", {
      title: "Hello",
    });
  };

  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;
```

`push()`는 첫번째 파라미터로 이동할 액티비티의 이름, 두번째 파라미터로 이동할 액티비티의 파라미터, 세번째 파라미터로 추가 옵션을 받아요. 세번째 파라미터인 추가 옵션은 선택적으로 넘기지 않을 수 있어요. (기본값을 사용해요)

```ts
push("액티비티_이름", {
  /* 액티비티 파라미터 */
});

// 또는
push(
  "액티비티_이름",
  {
    /* 액티비티 파라미터 */
  },
  {
    /* 추가 옵션 */
  },
);
```

`push()` 함수의 세번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

<APITable hasDefaultValue>
|         |           |                   |      |
| ------- | --------- | ----------------- | ---- |
| animate | `boolean` | 애니메이션을 켜거나 꺼요 | true |
</APITable>

<Callout emoji="💡">
  TypeScript를 활용하면, 액티비티 이름과 액티비티 파라미터가 엄격하게 타이핑
  되어있는 모습을 확인하실 수 있어요. TypeScript를 통해 안전하면서 편리하게
  **Stackflow**를 활용해보세요.
</Callout>

## 현재 액티비티 교체하기

다음으로 스택에 새로운 액티비티를 추가하지 않고 현재 액티비티를 교체하는 방법에 대해서 살펴봐요. `stackflow.ts`에서 생성했던 `useFlow()` 훅의 `replace()` 함수를 통해 다음과 같이 현재 액티비티를 교체할 수 있어요.

```tsx filename="MyActivity.tsx" copy
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

const MyActivity: ActivityComponentType = () => {
  const { replace } = useFlow();

  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };

  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;
```

`replace()`는 `push()`와 비슷한 API를 갖고 있어요. 첫번째 파라미터로 이동할 액티비티의 이름, 두번째 파라미터로 이동할 액티비티의 파라미터, 세번째 파라미터로 추가 옵션을 받아요. 세번째 파라미터인 추가 옵션은 선택적으로 넘기지 않을 수 있어요. (기본값을 사용해요)

```ts
replace("액티비티_이름", {
  /* 액티비티 파라미터 */
});

// 또는
replace(
  "액티비티_이름",
  {
    /* 액티비티 파라미터 */
  },
  {
    /* 추가 옵션 */
  },
);
```

`replace()` 함수의 세번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

<APITable hasDefaultValue>
|         |           |                   |      |
| ------- | --------- | ----------------- | ---- |
| animate | `boolean` | 애니메이션을 켜거나 꺼요 | true |
</APITable>

## 현재 액티비티 삭제하기

마지막으로 현재 액티비티를 삭제하고 이전 액티비티로 돌아가는 방법에 대해서 살펴봐요. `stackflow.ts`에서 생성했던 `useFlow()` 훅의 `pop()` 함수를 통해 다음과 같이 현재 액티비티를 삭제할 수 있어요.


```tsx showLineNumbers filename="Article.tsx" copy /pop/
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

type ArticleParams = {
  title: string;
};

const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
  const { pop } = useFlow();

  const goBack = () => {
    // 액티비티 하나만 제거
    pop();
  };

  const goBackMultiple = () => {
    // 액티비티 여러 개 제거
    pop(3);
  };

  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{params.title}</h1>
        <button onClick={goBack}>Back</button>
        <button onClick={goBackMultiple}>Back 3 Steps</button>
      </div>
    </AppScreen>
  );
};

export default Article;
```

`pop()` 함수의 첫번째 파라미터는 제거할 액티비티의 개수를 지정하거나 추가 옵션을 정의할 수 있어요.
첫번째 파라미터를 액티비티 개수로 사용하면, 두번째 매개변수는 추가 옵션을 전달하는 데 사용할 수 있어요.

```ts
pop(); // 액티비티 하나 제거

pop(3); // 액티비티 여러 개 제거

pop({
  /* 추가 옵션 */
}); // 추가 옵션과 함께 액티비티 하나 제거

pop(3, {
  /* 추가 옵션 */
}); // 추가 옵션과 함께 액티비티 여러 개 제거
```

`pop()` 함수의 첫번째 파라미터인 추가 옵션에는 다음과 같은 값이 있어요.

<APITable hasDefaultValue>
|         |           |                    |      |
| ------- | --------- | ------------------ | ---- |
| animate | `boolean` | 애니메이션을 켜거나 꺼요 | true |
</APITable>

---

액티비티를 쌓고, 교체하고, 삭제하는 방법에 대해서 알아봤어요. 이제 액티비티 내의 가상의 스택을 만들 수 있는 방법에 대해 알아봐요.
